import { Pagination, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
// import { PureComponent } from 'react';

import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
// import reactFlexible from 'react-flexible';
import './headerLoop.scss';
import 'swiper/css/effect-fade';
import { useNavigate } from 'react-router-dom';
import SwiperCore, { EffectFade } from 'swiper';
import React, { useEffect, useState } from 'react';
SwiperCore.use([EffectFade]);
// loop 首尾衔接的轮播效果
const MainHeader = (props) => {
    let navigate = useNavigate();
    const [myswiper, setMyswiper] = useState(null)
    const [swiperBg, setSwiperBg] = useState(0)
    const [showType, setShowType] = useState(true)
    useEffect(() => {
        window.onscroll = () => {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 10) {
                setShowType(true)
            } else {
                setShowType(false)

            }
            if (scrollTop > 200) {
                myswiper.autoplay.stop()
            } else {
                myswiper.autoplay.start()
            }
        }
        return window.onscroll = undefined
    }, [])
    const goSearch = () => {
        navigate('/search')
    }

    let { headerLooplist, listNav } = props;

    return <div>
        {/* 头部title */}
        <div className={showType ? 'fix_header' : "fix_header_0"} style={{ backgroundImage: `url(${headerLooplist[swiperBg].singleBackgroundURL})` }}>
            <div style={{
                position: 'absolute',
                zIndex: '5',
                color: '#fff',
                fontSize: '16px',
                top: '15px',
                left: '10px'
            }}>旺仔旺铺</div>
            {/* 头部固定 */}
            {/* 搜索框 */}
            <div style={{
                width: '90%',
                height: '30px',
                position: 'absolute',
                zIndex: '5',
                top: '50px',
                outline: 'none',
                border: 'none',
                background: '#f1f1f1',
                left: 'calc(10% / 2)',
                borderRadius: '20px'
            }} onClick={goSearch} />
        </div>




        <div style={{ backgroundImage: `url(${headerLooplist[swiperBg].singleBackgroundURL})` }}>
            <div style={{
                position: 'absolute',
                zIndex: '5',
                color: '#fff',
                fontSize: '16px',
                top: '15px',
                left: '10px'
            }}>旺仔旺铺</div>
            {/* 头部固定 */}

            {/* 搜索框 */}
            <div style={{
                width: '90%',
                height: '30px',
                position: 'absolute',
                zIndex: '5',
                top: '50px',
                outline: 'none',
                border: 'none',
                background: '#f1f1f1',
                left: 'calc(10% / 2)',
                borderRadius: '20px'

            }} onClick={goSearch} />
        </div>
        {/* 轮播图 */}
        <Swiper className='nav_box' effect="fade"
            modules={[Pagination, Autoplay, EffectFade]}
            pagination={{ clickable: true }}
            autoplay={{ delay: 2000 }}
            loop={true}
            onSlideChange={(swiper) => {
                setSwiperBg(swiper.realIndex)
            }}
            onSwiper={(swiper) => {
                setMyswiper(swiper)
            }}
        >
            {
                headerLooplist.map((item, index) =>
                    <SwiperSlide key={index}>
                        <div className='headerloop'><img src={item.pictureURL} alt={item.pictureURL} /></div>
                        <img src={item.singleBackgroundURL} alt={item.singleBackgroundURL} className='backgroud_img' />
                    </SwiperSlide>
                )
            }
        </Swiper>

        {/* 首页导航图片区开始  */}
        <div className='WangZai1_nav'>
            <ul>
                {
                    listNav.map((item, index) =>
                        <li key={index}>
                            <img src={item.pictureURL} alt='item.pictureName'></img>
                            <span>{item.pictureName}</span>
                        </li>)
                }
            </ul>
        </div>
        {/* 首页导航图片区结束  */}

    </div>
}



export default React.memo(MainHeader);